import * as echarts from '../../../ec-canvas/echarts';



Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
  },

  onLoad() {
    // 获取缓存中的目标数据
    let goldList = wx.getStorageSync('nowTarget')
    goldList = goldList.map(item=>{
      // 剩余天数
      let residueDay =item.duringTime - parseInt((new Date().getTime()-new Date(item.date).getTime()) / (1000*60*60*24))
      // 未完成天数
      let unfinishedDay = item.duringTime - residueDay - item.times
      return {
        title:item.title,
        data:[
          {value:item.times,name:'已完成天数'},
          {value:unfinishedDay,name:'未完成天数'},
          {value:residueDay,name:'剩余天数'},
        ]
      }
    })
    
    this.setData({
      goldList
    })
    // 循环数据，构建ec数组 
    // console.log(goldList)
    goldList.forEach((item, index) => {
      // 获取组件
      let ecComponent = this.selectComponent(`#mychart-dom-bar-${index}`);
      ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
        this.setOption(chart, item);
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    })
  },

  setOption(chart, item) {
    var option = {
        color:['#6e85b2','#5c527f','#3e2c41'],
        title: {
          text: item.title,
          subtext: '目标详情',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '目标',
            type: 'pie',
            radius: '50%',
            data: item.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
    }
    chart.setOption(option);
  },

  onReady() {
  },
});
